<template>
  <div class="zuida">
    <Back></Back>
    <div class="title"><h1>个人信息</h1></div>
    <div class="img demo-image__preview">
      <!-- <img :src="this.$store.state.img" alt=""> -->
        <el-image 
    style="width: 100%; height: 100%;border-radius: 100px;"
    :src="this.$store.state.img" 
    :preview-src-list="[this.$store.state.img]">
  </el-image>
       <div class="huan">
        <Huan></Huan>
       </div>
        </div>
        <el-divider></el-divider>
        <div class="xia" ref='xia'>
          <div class="id">
            <div>ID:</div>
            <div>{{id}}</div>
            <!-- <div>11111</div> -->
            <!-- &emsp;&emsp; -->
            
            </div>
          <div class="name">
            <div>昵称:</div>
            <div><el-button type="text" @click="dialogVisible = true">{{name}}</el-button></div>
            
            <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
            
          </div>
          
          <div class="qianming">
            <div>签名:</div>
            <div><el-button type="text" @click="dialogVisibleq = true">{{qianming}}</el-button></div>
            
          </div>
          <div class="sex">
            <div>性别:{{sex}}</div>
          </div>
          <div class="birthday">
            <div>出生日期:</div>
            <div><el-date-picker
      v-model="date"
      type="date"
      
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      placeholder="选择日期"
      >
    </el-date-picker></div>
            
          </div>
     <div class="tijiao">
      <!-- <div class="submit" @click="gai">确认修改</div> -->
      <button @click="gai" class="submit">确认修改</button>
     </div>
        </div>
        <!-- ------------------------------- -->
        <el-dialog
  title="修改昵称"
  :visible.sync="dialogVisible"
  width="40%"
  :before-close="handleClose">
  昵称:<input type="text"  v-model="name">
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
</el-dialog>
        <el-dialog
  title="修改签名"
  :visible.sync="dialogVisibleq"
  width="40%"
  :before-close="handleCloseq">
  签名:<input type="text"  v-model="qianming">
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleq = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisibleq = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
  
</template>
<script>
import Back from './zujian/back.vue'
import Huan from './zujian/huan.vue'
export default {
  methods:{
      gai(){
        var user=JSON.parse(sessionStorage.getItem("user"))
        // console.log(user);
        this.axios.post("/gaiuser/"+user.id,{
          user:this.name,
          tou:this.$store.state.img,
          qianming:this.qianming,
          sex:'nan',
          sheng:this.date,
          id:user.id
        }).then((res)=>{
          // console.log(res);
          this.$router.push('/wode')
          //-----------------------不执行
          
        })
        this.$router.push('/wode')
        this.$router.go(0)
        
        // this.$r
        
      },
    // getdate(val){
    //   console.log(val);
    // },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    handleCloseq(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  },
  data(){
    return {
      id:'',
      date:'',
      // value1:'',
      qianming:"",
      sex:'',
      name:'',
      dialogVisible: false,
      dialogVisibleq:false,
      // beforeAvatarUpload:'111',
        dialogImageUrl: '',//上传图片后的图片地址
        imageUrl: '',
        uploadImgBase64:''
      };
      
  },
  components:{
      Huan,Back
    },
  created(){
    this.$store.commit('bian')
     this.$store.commit('imgbian',this.uploadImgBase64)
    //-----------
    var user=JSON.parse(sessionStorage.getItem("user"))
    // console.log(user.id);
    // this.axios.get('/wode',{id:user.id
    // }).then((res)=>{
    //   console.log(res);
    // })
    this.axios.get('/wode/'+user.id).then((res)=>{
      // console.log(res.data[0]);
      this.shuju=res.data[0]
      this.date=this.shuju.sheng
      this.qianming=this.shuju.qianming
      // this.uploadImgBase64=this.shuju.tou
      this.id=this.shuju.id
      this.name=this.shuju.user
      this.sex=this.shuju.sex
      this.$store.commit('imgbian',this.shuju.tou)
      if(this.sex==='男'){
        this.$refs.xia.style.background='linear-gradient(to bottom right, #3da157ad, #3783c6)'
        // this.$refs.xia.style.background='linear-gradient(to bottom right, #3da157ad, #c6379beb)'
        console.log('111');
      }
      else{
        // this.$refs.xia.style.background='linear-gradient(to bottom right, #3da157ad, #3783c6)'
        this.$refs.xia.style.background='linear-gradient(to bottom right, #3da157ad, #c6379beb)'
        console.log('111');
      }
    })
  },
  // mou
}
</script>
<style lang="less" scoped>
  .zuida{
    padding-top: 10px;
    width: 60%;
    height: 1000px;
    background-color: #7fbd87;
    margin: 0 auto;
  }
  .title{
    // margin-top: 20px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    // font-size: 30px;
  }
  .img{
    position: relative;
    margin: 0 auto;
    margin-top: 20px;
    width: 200px;
    height: 200px;
   
    // background-color: blue;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
      border-radius: 100px;
    }
    .huan{
      position: absolute;
      width: 50px;
      height: 50px;
      top: 146px;
      left: 146px;
      background-color: #5c875b52;
      border-radius: 25px;
      line-height: 50px;
      text-align: center;
      font-size: 40px;
      color: #656b66;
    }
  }
  .bian{
    position: absolute;
    top:10px;
  }
  .xia{
    width: 60%;
    // padding-bottom: 30px;
    // height: 1000px;
    background-color: #ffffff12;
    box-shadow: 1px 1px 10px #717171;
    border-radius: 20px;
    margin: 0 auto;
    div{
      margin-top: 10px;
      box-sizing: border-box;
      font-size: 30px;
      width: 100%;
      height: 66px;
      // border: #656b66 1px solid;
      text-align: center;
      line-height: 66px;
      input{
        font-size: 30px;
        background-color: transparent;
        border: transparent 0px solid;
        
      }
      input:focus{
          outline: none;
        }
    }
  }
  .el-button{
    // color: red;
    font-size: 30px;
  }
  /deep/ .el-dialog__body{
    // color: red;
    font-size: 30px;
  }
  .el-dialog input{
    font-size: 30px;
  }
  .id,.name,.qianming,.sex,.birthday{
    display: flex;
    // justify-content:center;
  }
  .birthday{
    line-height: 50px;
  }
  /deep/.el-input__icon{
    margin-left: -4px;
    line-height: 70px;
  }
  /deep/ .el-input__inner{
    background-color: #ffffff05;
    // width: 300px;
    border: 1px #5a855a solid;
    // border-right: 0px;
    color: #444f46;
  }
  /deep/ .el-button--text{
    color: #646565;
  }
  .tijiao{
    
    width: 10%;
    height: 30px;
    // background-color: saddlebrown;
    margin: 0 auto;
    // margin-top: 20px;
    .submit{
      margin: 0 auto;
      margin-top: 100px;
      width: 25%;
      height: 100%;
      border-radius: 10px;
      background-color: #96dea3;
    }
  }
  /deep/ .el-input__suffix{
    color: #1a1d1b;
  }
  /deep/ .el-input__prefix{
    color: #1a1d1b;
  }
</style>